<template>
<!--  <div id="funnel-chart"></div>-->
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'FunnelChart',
  data() {
    return {
      option: {
        title: {
          text: '风险级别统计',
          subtext: '风险级别数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}'  // 显示为个数而非百分比
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['一级风险', '二级风险', '三级风险', '四级风险', '五级风险'],
          top: 'bottom'
        },
        series: [
          {
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',  // 固定最小层宽度
            maxSize: '100%',  // 固定最大层宽度
            sort: 'descending', // 排序规则：从上到下逐渐收窄
            gap: 2, // 设置层与层之间的间距
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 20, name: '一级风险', itemStyle: { color: '#C40E00' } }, // 深红
              { value: 42, name: '二级风险', itemStyle: { color: '#D74F30' } },
              { value: 65, name: '三级风险', itemStyle: { color: '#E78C6D' } },
              { value: 82, name: '四级风险', itemStyle: { color: '#F2B8A3' } },
              { value: 103, name: '五级风险', itemStyle: { color: '#F7D6C5' } } // 浅红
            ]
          }
        ]
      }
    };
  },
  mounted() {
    const chartDom = document.getElementById('funnel-chart');
    const myChart = echarts.init(chartDom);
    myChart.setOption(this.option);

    // Resize the chart when the window is resized
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
  beforeDestroy() {
    // Cleanup chart instance when the component is destroyed
    window.removeEventListener('resize', this.resize);
  }
};
</script>

<style scoped>
#funnel-chart {
  width: 300px;
  height: 400px;
}
</style>
